<template>
  <q-layout view="lHh Lpr lFf">
    <q-header elevated class="header">
      <q-toolbar class="toolbar">
        <q-btn flat dense round icon="menu" aria-label="Menu" @click="toggleLeftDrawer" />

        <div class="logo-section">
          <q-toolbar-title class="logo-title">大学择校系统</q-toolbar-title>
        </div>

        <q-space />

        <div class="top-links">
          <a href="#" class="top-link">首页</a>
          <a href="#/college-finder" class="top-link">择校</a>
          <a href="#" class="top-link">排名</a>
          <a href="#" class="top-link">专业</a>
          <a href="#" class="top-link">关于我们</a>
        </div>

        <div class="auth-section">
          <q-btn flat label="登录" to="/login" />
          <q-btn flat label="注册" to="/register" class="q-ml-sm" />
        </div>
      </q-toolbar>
    </q-header>

    <!-- <q-drawer v-model="leftDrawerOpen" show-if-above bordered class="drawer">
      <q-list>
        <q-item-label header>导航菜单</q-item-label>

        <EssentialLink v-for="link in linksList" :key="link.title" v-bind="link" />
      </q-list>
    </q-drawer> -->

    <q-page-container>
      <router-view />
    </q-page-container>

    <q-footer class="footer">
      <div class="footer-content q-pa-md">
        <div class="row q-col-gutter-md">
          <div class="col-12 col-md-3">
            <div class="text-h6">大学择校系统</div>
            <p>帮助学生找到最适合的大学和专业，提供全面的高校信息和智能匹配服务。</p>
          </div>
          <div class="col-12 col-md-3">
            <div class="text-h6">快速链接</div>
            <div class="footer-links">
              <div><q-btn flat dense to="/" label="首页" class="footer-link" /></div>
              <div><q-btn flat dense to="/college-finder" label="择校" class="footer-link" /></div>
              <div><q-btn flat dense to="/login" label="登录" class="footer-link" /></div>
              <div><q-btn flat dense to="/register" label="注册" class="footer-link" /></div>
            </div>
          </div>
          <div class="col-12 col-md-3">
            <div class="text-h6">联系方式</div>
            <div class="contact-item">
              <q-icon name="email" class="q-mr-sm" />
              <span>info@collegefinder.edu.cn</span>
            </div>
            <div class="contact-item">
              <q-icon name="phone" class="q-mr-sm" />
              <span>010-12345678</span>
            </div>
          </div>
          <div class="col-12 col-md-3">
            <div class="text-h6">关注我们</div>
            <div class="social-links">
              <q-btn round flat icon="fab fa-wechat" />
              <q-btn round flat icon="fab fa-weibo" class="q-ml-sm" />
              <q-btn round flat icon="fab fa-twitter" class="q-ml-sm" />
            </div>
          </div>
        </div>
        <div class="copyright text-center q-mt-md">
          &copy; {{ new Date().getFullYear() }} 大学择校系统. 保留所有权利.
        </div>
      </div>
    </q-footer>
  </q-layout>
</template>

<script setup>
import { ref } from 'vue'
// import EssentialLink from 'components/EssentialLink.vue'

// const linksList = [
//   {
//     title: '首页',
//     caption: '回到首页',
//     icon: 'home',
//     link: '/',
//   },
//   {
//     title: '择校系统',
//     caption: '查找理想大学',
//     icon: 'school',
//     link: '/college-finder',
//   },
//   {
//     title: 'Docs',
//     caption: 'quasar.dev',
//     icon: 'school',
//     link: 'https://quasar.dev',
//   },
//   {
//     title: 'Github',
//     caption: 'github.com/quasarframework',
//     icon: 'code',
//     link: 'https://github.com/quasarframework',
//   },
//   {
//     title: '论坛',
//     caption: 'forum.quasar.dev',
//     icon: 'record_voice_over',
//     link: 'https://forum.quasar.dev',
//   },
// ]

const leftDrawerOpen = ref(false)

function toggleLeftDrawer() {
  leftDrawerOpen.value = !leftDrawerOpen.value
}
</script>

<style lang="scss" scoped>
.header {
  background: #fff;
  color: #333;
  border-bottom: 1px solid #e0e0e0;

  .toolbar {
    min-height: 70px;
  }

  .logo-section {
    .logo-title {
      font-size: 1.5rem;
      font-weight: 600;
      color: #1976d2;
    }
  }

  .top-links {
    display: flex;
    align-items: center;

    .top-link {
      color: #333;
      text-decoration: none;
      margin: 0 15px;
      font-size: 0.95rem;
      font-weight: 500;
      padding: 10px 0;
      position: relative;

      &:hover {
        color: #1976d2;
      }

      &.router-link-exact-active {
        color: #1976d2;

        &::after {
          content: '';
          position: absolute;
          bottom: 0;
          left: 0;
          width: 100%;
          height: 3px;
          background: #1976d2;
        }
      }
    }
  }

  .auth-section {
    .q-btn {
      color: #1976d2;
      font-size: 0.9rem;
      font-weight: 500;
    }
  }
}

.drawer {
  .q-item-label {
    color: #1976d2;
  }
}

.footer {
  background: #f5f5f5;
  color: #333;
  position: relative;

  .footer-content {
    max-width: 1200px;
    margin: 0 auto;

    .text-h6 {
      color: #1976d2;
      margin-bottom: 15px;
      font-weight: 600;
    }

    p {
      color: #666;
      line-height: 1.6;
      font-size: 0.9rem;
    }

    .contact-item {
      display: flex;
      align-items: center;
      margin-bottom: 10px;
      color: #666;
      font-size: 0.9rem;
    }

    .footer-links {
      .footer-link {
        color: #666;
        margin-bottom: 8px;
        text-transform: none;
        font-size: 0.9rem;
        justify-content: flex-start;
        padding: 0;

        &:hover {
          color: #1976d2;
          background: transparent;
        }
      }
    }

    .social-links {
      .q-btn {
        color: #1976d2;
        font-size: 1.2rem;
      }
    }
  }

  .copyright {
    border-top: 1px solid #ddd;
    padding-top: 15px;
    color: #999;
    font-size: 0.9rem;
  }
}

@media (max-width: $breakpoint-xs-max) {
  .top-links {
    display: none !important;
  }

  .logo-section {
    .logo-title {
      font-size: 1.2rem !important;
    }
  }
}
</style>
